<template>
	<view class="bus-page">
		<!-- 搜索 -->
		<view class="bus-index-top">
			<view class="search-box" >
				<view class="location-box" @click="changeAddress">
					<view class="location-address" >{{city?city:'切换城市'}}</view>
					<view class="triangle-border-down" style="margin:8rpx 32rpx 0 8rpx; border-top-color:#000"></view> 
				</view>
				<view @click="goSearch" class="search-input-containt">
					<image class="search-input-icon-search" src="/static/images/bus/search_icon3x.png"></image>
					<text class="search-input-edit">查找公交线路</text>
				</view>
			</view>
			<!-- 快捷功能 -->
			<!-- <view class="menu-box">
				<block v-for="(menuItem,menuIndex) in menuList" :key="menuIndex">
					<view class="menu-item" @click="menuClick(menuItem)">
						<image class="menu-img" :src="menuItem.src"></image>
						<view class="menu-text">{{menuItem.menuName}}</view>
					</view>
				</block>
			</view> -->
		</view>
		<!-- 选项卡 附近公交-我的收藏 -->
		<view class="bus-content-box">
			<view class="tab-box">
				<view class="tab-list">
					<view class="tab-item" v-for="(item,index) in tabbar" :key="index"
						:class="[swiperIndex==index ? 'active' : '']" @click.stop="swichNav(index)">
						<view class="tab-text-content">
							<image class="tab-icon" :src="item.src"></image>
							<text class="tab-text" :class="[swiperIndex==index?'tab-action':'']">{{item.text}}</text>
						</view>
						<image v-if="swiperIndex==index" src="/static/images/bus/tab-press1.png"></image>
					</view>
				</view>
			</view>

			<!-- 附近公交站 -->
			<view class="staion-box" v-if="swiperIndex == 0">
				<!-- 没有开启定位 -->
				<view class="card_container" style="margin-top: 40rpx;" v-if="!showlocerr">
					<view style="text-align:center;padding:60rpx;">
						<view style="font-size:32rpx;text-align:center">
							<text>“实时公交”需要您当前的位置信息 建议打开手机定位试一下(如以打开，请下拉刷新试试)</text>
						</view>
						<!-- #ifdef MP -->
						<button open-type="openSetting" class="button-k font-color-weak"
							style="margin-top:40rpx;">
							去开启定位
						</button>
						<!-- #endif -->

					</view>
				</view>
				<!-- 没有数据 -->
				<view class="card_container" style="margin-top: 40rpx;" v-if="nodata&&(stationList.length==0)">
					<view style="text-align:center">
						<view style="padding:60rpx 150rpx;font-size:32rpx;text-align:center;color: rgba(0,0,0,0.38);">
							<text>当前城市暂无实时公交数据，请点击左上角切换城市查看~~~ </text>
						</view>
					</view>
				</view>


				<!-- 站点列表 -->
				<!-- <scroll-view scroll-x="false" scroll-y="true" :show-scrollbar="false"
					:style="{height:contentHeight+'px'}" style="top:0"> -->
					<!-- <view class="station-card">
					<view  class="station-card-head station-card-head-border-bottom">
						<view class="left">
							<image src="/static/images/bus/station_car.png"></image>
							<text class="station-name text-ellipsis">省政府后门</text>
							<text class="home-font-sub font-color-weak-28">200m</text>
						</view>
						<view class="right">
							<text class="home-font-sub">收起</text>
							<image src="/static/images/bus/station_open.png"></image>
						</view>
					</view>
					
					<view class="station-card-list">
						<view class="station-card-list-item">
							<view class="line-name">
								<view class="left">37路</view>
								<view class="right">
									  <image src="/static/images/bus/an_realtime.gif"></image>
									  <text>1分钟 • 两站</text>
								</view>
							</view>
							<view class="line-direction">
								开往 <text>贵阳北站</text>
							</view>
						</view>
						<view class="station-card-list-item">
							<view class="line-name">
								<view class="left">37路</view>
								<view class="right">
									  <image src="/static/images/bus/an_realtime.gif"></image>
									  <text>1分钟 • 两站</text>
								</view>
							</view>
							<view class="line-direction">
								开往 <text>贵阳北站</text>
							</view>
						</view>
					</view>
					
					<view class="see-all">
					    <text class="font-color-weak-28">查看全部</text>
					</view>
					
					
					<view class="station-card-tag-list">
							<view class="tag-item">
								12路
							</view>
							<image class="more-img" src="/static/images/bus/more.png"></image>
				</view> -->
				<block v-if="showlocerr">
					<view class="blk" v-for="(stationItem,stationIndex) in stationList" :key="stationIndex">
						<view class="station-card" >
							<view class="station-card-head station-card-head-border-bottom"
								@click.stop="changeStationState(stationIndex)">
								<view class="left">
									<image src="/static/images/bus/station_car.png"></image>
									<text class="station-name text-ellipsis">{{stationItem.stationName}}</text>
									<text
										class="home-font-sub font-color-weak-28">{{stationItem.distance.toFixed(0)}}m</text>
								</view>
								<view class="right">
									<text class="home-font-sub">{{stationItem.isOpen ? '收起' : '展开'}}</text>
									<image
										:src="stationItem.isOpen ? '/static/images/bus/station_open.png' : '/static/images/bus/station_close.png'">
									</image>
								</view>
							</view>
						
							<view class="station-card-list" v-show="stationItem.isOpen">
								<block v-for="(lineItem,lineIndex) in stationItem.nearbySegment" :key="lineIndex">
									<view class="station-card-list-item" v-if="stationIndex == 0 && lineIndex < 2"
										@click="goLinesPage(lineItem,stationItem)">
										<view class="line-name">
											<view class="left">{{lineItem.lineName}}</view>
											<view class="right">
												<image src="/static/images/bus/an_realtime.gif"></image>
												<text v-if="lineItem.isRun==null"
													style="color: rgba(0, 0, 0, 0.38);">{{lineItem|formatDisplay}}</text>
												<text v-else style="color: #FF9C15;">{{lineItem|formatDisplay}}</text>
											</view>
										</view>
										<view class="line-direction">{{lineItem.segmentName}}</view>
									</view>
									<view class="station-card-list-item" v-else-if="openType == false || stationIndex !== 0"
										@click="goLinesPage(lineItem,stationItem)">
										<view class="line-name">
											<view class="left">{{lineItem.lineName}}</view>
											<view class="right">
												<image src="/static/images/bus/an_realtime.gif"></image>
												<text v-if="lineItem.isRun==null"
													style="color: rgba(0, 0, 0, 0.38);">{{lineItem|formatDisplay}}</text>
												<text v-else style="color: #FF9C15;">{{lineItem|formatDisplay}}</text>
											</view>
										</view>
										<view class="line-direction">{{lineItem.segmentName}}</view>
									</view>
								</block>
								<!-- 查看全部 -->
								<view class="see-all" v-if="stationIndex == 0 && stationItem.nearbySegment.length > 2"
									@click="setOpenType">
									<text class="font-color-weak-28">{{openType?'查看全部':'收起'}}</text>
								</view>
							</view>
						
							<view class="station-card-tag-list" v-show="!stationItem.isOpen">
								<view style="display: inline-block;"
									v-for="(lineItem,lineIndex) in stationItem.nearbySegment" :key="lineIndex">
									<view class="tag-item" v-if="lineIndex < 10" @click="goLinesPage(lineItem,stationItem)">
										{{lineItem.lineName}}
									</view>
									<image class="more-img" v-if="lineIndex == 10" src="/static/images/bus/more.png">
									</image>
								</view>
							</view>
						</view>
						<!-- <view class="ad-item" v-if="stationIndex==0&&stationList.length==1">
							<sx-banner></sx-banner>
						</view> -->
						<!-- #ifdef MP-WEIXIN  -->
						<view class="ad-item" v-if="stationIndex==2&&stationList.length>=3&&adData&&adData.is_show">
							<ad v-if="adData.type==1" :unit-id="adData.banner_id" :ad-intervals="30"></ad>
							<view v-if="adData.type==2" @click="goApp" class="diy-ad display-flex display-flex-justify-center">
								<image style="height: 130px;width: 100%;"  :src="adData.image" mode=""></image>
							</view>
							<view v-if="adData.type==3" @click="goselfApp" class="diy-ad display-flex display-flex-justify-center">
								<image style="height: 130px;width: 100%;"  :src="adData.image" mode=""></image>
							</view>
							<view v-if="adData.type==4">
								<ad v-if="adData.b_type==2" adpid="1128613343" unit-id="adunit-44a2d05a5ce645a4" :ad-intervals="30"></ad>
								<sx-banner  v-if="adData.b_type==1" :unitId="adData.banner_id"></sx-banner>
								
								<sx-cust  v-if="adData.b_type==3" :unitId="adData.cust_id"></sx-cust>
								
								<ad-interstitial v-if="adData.c_type==2"  ref="adinterstitial" @load="onload"   :adpid="1866657604" :loadnext="true" >             </ad-interstitial> 
								<sx-cp v-if="adData.c_type==1"  :unitId="adData.cp_id" ></sx-cp>
							</view>
						</view>
					    <!-- #endif -->
					</view>
					
				</block>
				<!-- </scroll-view> -->
			</view>
			<!-- 我的收藏 -->
			<view class="collection-box" v-if="swiperIndex == 1">
				<!-- 收藏未为空提示 -->
				<view class="column" style="width:100%" v-if="!collectList.length">
					<image src="https://qiniu.gybsky.cn/other%2F111b4a622e52d7bcc7cb7f0df3b76e9a.png"
						style="width:180rpx;height:180rpx;margin-top:160rpx;margin-left:auto;margin-right:auto;margin-bottom: 40rpx;">
					</image>
					<text style="margin-top:-60rpx;margin-left:auto;margin-right:auto;">还没有收藏的公交线路</text>
				</view>

				<!-- 收藏列表 -->
				<view  v-if="collectList.length !== 0">
				<!-- <scroll-view scroll-top="0" scroll-x="false" scroll-y="true" :show-scrollbar="false"
					:style="{height:contentHeight+'px'}" style="top:0" v-if="collectList.length !== 0"> -->
					<block v-for="(collectListItem,collectListIndex) in collectList" :key="collectListIndex">
						<view class="collection-list" @click="selectLine(collectListItem)">
							<view class="collection-list-item">
								<view class="line-name">
									<view class="left">{{collectListItem.lineName}}</view>
									<view class="right">
										<!-- <image src="/static/images/bus/an_realtime.gif"></image> -->
										<text>{{collectListItem.drivingDirection == 1?'正向':collectListItem.drivingDirection == 2?'反向':'环线'}}</text>
									</view>
								</view>
								<view class="line-direction">
									{{collectListItem.segmentName}}
								</view>
							</view>
						</view>
					</block>
				</view>
				<!-- </scroll-view> -->
			</view>

		</view>
		<!-- 今日看点 -->
		<!-- <view class="information-box">
			<view class="sub-title-box">
				<view class="line-left"></view>
				<view class="sub-title">今日看点</view>
			</view>
			<view class="information-content-box">
				<image class="information-img" @click="lookInformation"
					:src="$Common.imgUrl('/bus/bus_index/bus_bg.jpg')" mode="widthFix"></image>
			</view>
		</view> -->
		<adhd :sharePacket="sharePacket"></adhd>
		<!-- 遮罩 -->
		<view class="mask" v-if="isShowMask"></view>
		
		<z-navigation></z-navigation>
	<!-- 	<tn-tabbar
		   activeColor="#838383"
		   inactiveColor="#AAAAAA"
		   activeIconColor="#FFFFFF"
		   :animation="true"
		   :safeAreaInsetBottom="true"
		 ></tn-tabbar> -->
	</view>
</template>

<script>
	
	import {
		getNavigation
	} from '@/api/public.js';
	import {
		getRealIndex
	} from '@/api/api.js';
	import adhd from '@/components/adhd/index';
	export default {
		components: {
			adhd
		},
		data() {
			return {
				sharePacket: {
					isState: true, //默认不显示
					touchstart:false
				}, 
				adData: null,
				newData: {},
				city:uni.getStorageSync('cityData').city,
				menuList: [{
						menuId: 0,
						menuName: '线路',
						src: this.$API.BASE_URL + '/bus/bus_index/xl.png'
					},
					{
						menuId: 1,
						menuName: '地铁',
						src: this.$API.BASE_URL + '/bus/bus_index/dt.png'
					},
					{
						menuId: 2,
						menuName: '线路调整',
						src: this.$API.BASE_URL + '/bus/bus_index/xltz.png'
					},
					{
						menuId: 3,
						menuName: '乘车码',
						src: this.$API.BASE_URL + '/bus/bus_index/ccm.png'
					}
				],
				firstEntry: true, //首次获取
				tabbar: [{
						state: 0,
						text: '附近公交站',
						src: this.$API.BASE_URL + '/bus/bus_index/fjgj.png'
					},
					{
						state: 1,
						text: '收藏线路',
						src: this.$API.BASE_URL + '/bus/bus_index/sc.png'
					}
				],
				swiperIndex: 0,
				contentHeight: '',
				mainHeight: '',
				showlocerr: false, //定位是否开启
				nodata: false, //没有数据提示

				stationList: [], //站点列表

				collectList: [], //收藏列表

				openType: true, //最近站点的查看更多
				stationOpenType: 0, //查看的是哪一个站点线路列表，默认最近站点

				setInterTime: null ,//定时器对象
				isShowMask:false//是否是接口请求中
			}
		},
		onLoad() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			//  高度自适应
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res);
					let calc = res.windowHeight;
					// that.mainHeight = calc;
					// that.contentHeight = calc - 120;
				}
			});
			// 定位
			this.location();
			this.getRealIndex()
		},
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// getNavigation().then(res => {
			// 	this.newData = res.data
				
			// 	if (this.newData.status && this.newData.status.status) {
			// 		uni.hideTabBar()
			// 	} else {
			// 		uni.showTabBar()
			// 	}
			// })
			let that = this;
			// 重新获取城市
			if (this.swiperIndex == 0) {
				// 刷新实时数据
				clearInterval(this.setInterTime);
				this.setInterTime = setInterval(() => {
					that.getNearStationBusTime();
				}, 15000)
			} else {
				// 收藏
				this.initCollect();
			}
			if(uni.getStorageSync('getData')){
				that.getNearStation();
			}
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this;
			if (this.swiperIndex == 0 && this.isShowMask == false) {
				this.stationOpenType = 0;
				this.isShowMask = true;
				// 定位
				this.location();
			} else {
				// 更新我的收藏
				this.initCollect();
			}
			this.isShowMask = false;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1500)
		},
		onUnload() {
			clearInterval(this.setInterTime);
		},
		onHide() {
			clearInterval(this.setInterTime);
		},
		filters: {
			formatDisplay(val) {
				if (val.isRun == null) {
					return '正在查询';
				}
				if (!val.isRun) {
					return '不在运营时间';
				}
				if (val.targetStationCount == null) {
					return '等待首站发车';
				}
				if (val.targetStationCount == 0) {
					return '已到站';
				}
				if (val.targetStationDistance < 400 && val.targetStationCount > 0) {
					return '即将到站';
				}

				let time = val.targetStationDistance / val.speed;

				return `${(time/60).toFixed(0)}分钟 • ${val.targetStationCount}站`;
			}
		},
		methods: {
			// 修改城市地址
			changeAddress() {
				// this.isShowMask = true;
				// this.location();
				// return;
				var source = 'bus';
				uni.navigateTo({
					url: `/pages/city_select/index?source=${source}`
				})
			},
			// 跳转搜索页
			goSearch() {
				uni.navigateTo({
					url: '/pages/real_bus/xr_search'
				});
			},
			// 快捷功能按钮
			menuClick(item) {
				this.$Common.msg('功能开发中...');
				// console.log(JSON.stringify(item));
			},
			
			// 获取位置信息
		 	location() {
				let that = this;
				// #ifdef H5
				// let getData = {
				// 	// 喷水池
				// 	"longitude": 106.712482,
				// 	"latitude": 26.584241
				// }
				// let getData = {
				// 	// 遵义
				// 	"longitude": 107.031922,
				// 	"latitude": 27.721931
				// }
				// 国际会议中心
				let getData = {
					// 国际会议中心东
					"longitude": 106.649868,
					"latitude": 26.638242
				}
				
				that.showlocerr = true;
				uni.setStorageSync('getData', getData);
			     that.$Common.getCity();

				that.getNearStation();
				// #endif

				// 定位获取经纬度
				// #ifdef MP-WEIXIN || APP-PLUS
				// let getData = {
				// 	/**北京定位  116.378517,39.865246
				// 	 深圳定位： 114.057939,22.543527**/
				// 	"longitude": 114.057939,
				// 	"latitude": 22.543527,
				// }
				// that.showlocerr = true;
				// uni.setStorageSync('getData', getData);
				// that.$Common.getCity();
				// that.getNearStation();
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						// console.log(JSON.stringify(res));
						that.showlocerr = true;
						let getData = {
							"longitude": res.longitude,
							"latitude": res.latitude
						}
						uni.setStorageSync('getData', getData);
						that.$Common.getCity();
						that.getNearStation();
					},
					complete: function(res) {},
					fail: function(res) {
						console.log(JSON.stringify(res));
						that.showlocerr = false; //定位失败
						that.isShowMask = false;
					}
				});
				// #endif
			},
			getNearStation() { //获取附近站点
				if (!this.$Common.isGetToken()) {
					this.$Common.replaceToken();
				}
				let that = this;
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let getData = uni.getStorageSync('getData');
				this.$request({
					url: this.$API.getNearStation,
					data: getData,
					header: header,
					timeout: 20000,
					isShowLoading: true,
					lodingText: '加载中...'
				}).then(res => {
					// console.log(JSON.stringify(res));
					this.city = uni.getStorageSync('cityData').city;
					if (res.code == 200) {
						if (res.data.length == 0) { //附近没有站点
							that.nodata = true;
							return false;
						}
						this.stationList = res.data;
						this.stationList.sort(function(a, b) { //按距离近到远排序
							return a.distance - b.distance
						});
						// this.stationList.forEach((val, index) => {
						// 	index == that.stationOpenType ? that.$set(val, 'isOpen', true) : that.$set(val, 'isOpen', false);
						// })
						this.stationList.forEach((val, index) => {
							that.$set(val, 'isOpen', false);
						})
						that.getNearStationBusTime(true);
					} else {
						that.nodata = true;
						return false;
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none'
						// })
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			//展开收起
			changeStationState(stationIndex) {
				// console.log(JSON.stringify(stationItem));
				if(this.isShowMask == false){
			
					if(this.stationOpenType !== stationIndex){
						for (var i = 0; i < this.stationList.length; i++) {
							if (stationIndex == i) {
								this.stationList[stationIndex].isOpen = !this.stationList[stationIndex].isOpen
							} else {
								this.stationList[i].isOpen = false;
							}
						}
						this.stationOpenType = stationIndex;
						// this.isShowMask = true;
						this.getNearStationBusTime(true,true);
					}else{
						this.stationList[stationIndex].isOpen = !this.stationList[stationIndex].isOpen
					}
				}
			},
			// 点击查看更多
			setOpenType() {
				this.openType = !this.openType;
			},
			getNearStationBusTime(isShowLoading,changeCity) { //到站时间，index站点的数组索引
				let that = this;
				var arr = [];
				console.log(1111,that.nodata == true && changeCity==false)
				/**没有数据直接返回**/
				if (that.nodata == true && changeCity==false) {
					return false;
				}
				var nearbySegment = this.stationList[that.stationOpenType].nearbySegment;
				for (var i = 0; i < nearbySegment.length; i++) {
					arr.push(nearbySegment[i].stationId)
				}
				if (!this.$Common.isGetToken()) {
					this.$Common.replaceToken();
				}
				if(isShowLoading !== true){
					isShowLoading = false;
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let getData = {
					stationIds: arr.join(','), //站点id
					stationName: that.stationList[that.stationOpenType].stationName //站点名
				};
				// console.log(JSON.stringify(getData));
				// console.log(JSON.stringify(that.stationList[that.stationOpenType]));
				this.$request({
					url: this.$API.getNearStationBusTime,
					data: getData,
					header: header,
					timeout: 20000,
					isShowLoading: isShowLoading,
					lodingText: '获取实时数据...'
				}).then(res => {
					// console.log("hhhh:"+JSON.stringify(res));
					this.isShowMask = false;
					if (res.code == 200) {
						that.stationList[that.stationOpenType].isOpen = true;
						that.stationList[that.stationOpenType].nearbySegment = res.data;
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			//跳转到详情页-附近站点
			goLinesPage(lineItem, stationItem) {
				clearInterval(this.setInterTime);
				uni.navigateTo({
					url: `../real_bus/xr_line_detail_1?source=1&stationId=${stationItem.stationId}&stationName=${stationItem.stationName}&lineId=${lineItem.lineId}&drivingDirection=${lineItem.drivingDirection}`
				})
			},
			// 点击标题切换当前页时改变样式
			swichNav(e) {
				let cur = e;
				if (this.swiperIndex == cur) {
					return false;
				} else {
					this.swiperIndex = cur
					//this.loadData(this.currentTab);
					if (this.swiperIndex == 1) {
						this.initCollect(true); //收藏线路
					}
				}

			},
			// 滚动切换标签样式
			changeTab: function(e) {
				let that = this;
				this.swiperIndex = e.detail.current;
				if (this.swiperIndex == 1) {
					this.initCollect(true); //收藏线路
				}
			},
			//获取收藏线路
			initCollect(isShowLoading) {
				if (!this.$Common.isGetToken()) {
					this.$Common.replaceToken();
				}
				let that = this;
				if (isShowLoading !== true) {
					isShowLoading = false
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let query = {
					openId: uni.getStorageSync('openId')
				};
				this.$request({
					url: this.$API.queryAllCollect,
					data: query,
					header: header
					// isShowLoading: isShowLoading
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.collectList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			// 跳转详情，不传站点-收藏
			selectLine(item) {
				clearInterval(this.setInterTime);
				// 跳转页面
				uni.navigateTo({
					url: `/pages/real_bus/xr_line_detail_1?source=2&stationId=&stationName=&lineId=${item.lineId}&drivingDirection=${item.drivingDirection}`
				})
				
				// #ifdef MP || H5
				// uni.navigateTo({
				// 	url: `/pages/real_bus/xr_line_detail_1?source=3&stationId=&stationName=&lineId=${item.lineId}&drivingDirection=${item.drivingDirection}`
				// })
				// #endif

				// #ifdef APP-PLUS
				// uni.navigateTo({
				// 	url: `/pages/real_bus/xr_line_detail_app?source=3&stationId=&stationName=&lineId=${item.lineId}&drivingDirection=${item.drivingDirection}`
				// })
				// #endif
			},
			// 今日看点
			lookInformation() {

			},
			getRealIndex(){
				var that = this
				getRealIndex().then( res => {
					that.adData = res.data
					console.log(222233,that.adData)
				})
			},
			onload(e) {
			  console.log('广告数据加载成功1111',e);
					
			  setTimeout(res => {
				  this.$refs.adinterstitial.show()
			  },3500)
			},
			goselfApp(){
				uni.navigateTo({
					url: this.adData.path,
				})
			},
			goApp(){
				uni.navigateToMiniProgram({
				  appId: this.adData.appid, 
				  path: this.adData.path,
				  extraData: {
				  },
				  success(res) {
				    // 打开成功
				  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ad-item{
		background-color: #fff;
		border-radius: 16rpx;
		margin: 40rpx;
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(154, 154, 154, 0.75);
	}
	// /*  */
	.bus-page {
		// #ifdef H5
		min-height: calc(100vh - var(--window-top) - 100rpx);
		// #endif
		// #ifdef APP-PLUS || MP
		min-height: calc(100vh - var(--window-top));
		// #endif
		position: relative;
	}

	// 顶部功能，搜索，快捷按钮
	.bus-index-top {
		background-color: #FEFBFB;
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(186, 182, 182, 0.75);
		position: sticky;
		// #ifdef H5
		// top: 88rpx;
		// #endif
		// #ifdef APP-PLUS || MP
		top: 0rpx;
		// #endif
		z-index: 10;

		// /* 搜索 */
		.search-box {
			// height: 120rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: $uni-spacing-col-base $uni-spacing-row-base;

			// 定位
			.location-box {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.location-address {
					max-width: 150rpx;
					overflow: hidden;
					// text-overflow:ellipsis;
					white-space: nowrap;
				}

				.icon-dsj {
					margin-left: 10rpx;
				}
			}

			// 搜索框
			.search-input-containt {
				flex: 1;
				display: flex;
				align-items: center;
				margin: 0rpx $uni-spacing-row-base;
				padding: 16rpx;
				border: 1px solid #DBE0E9;
				border-radius: 50rpx;
				background-color: #EEF0F4;

				.search-input-icon-search {
					width: 40rpx;
					height: 40rpx;
					margin: 0 8rpx;
				}

				.search-input-edit {
					color: #909399;
				}
			}
		}

		// 快捷按钮
		.menu-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: $uni-spacing-col-base 100rpx;

			.menu-item {
				margin: 0rpx $uni-spacing-row-base;
				text-align: center;

				.menu-img {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
	// 公交内容
	.bus-content-box{
		// padding-bottom: 360rpx;
		// 选项卡
		.tab-box {
			margin-top: 40rpx;
			text-align: center;
			height: 46rpx;
		
			.tab-list {
				display: inline-flex;
				flex-direction: row;
		
				.tab-item {
					margin-right: 100rpx;
					display: flex;
					flex-direction: column;
		
					.tab-text-content {
						display: flex;
						justify-content: flex-start;
						align-items: center;
		
						.tab-icon {
							width: 32rpx;
							height: 32rpx;
							margin: 0rpx;
							margin-right: 10rpx;
						}
		
						.tab-text {
							height: 32rpx;
							line-height: 32rpx;
							font-size: $uni-font-size-base;
						}
		
						.tab-action {
							font-weight: bold;
						}
					}
		
					image {
						width: 32rpx;
						height: 6rpx;
						margin-left: 50%;
						margin-top: 12rpx;
					}
				}
			}
		}
		
		// 站点列表
		.staion-box {
			// min-height: 420rpx;
			padding-bottom: 40rpx;
			
		}
		
		.station-card {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 40rpx;
			padding: 0 40rpx;
			box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(154, 154, 154, 0.75);
			
			.station-card-head {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
		
				.left {
					display: flex;
					align-items: center;
		
					.station-name {
						font-weight: bold;
						// font-size: 30rpx;
						color: rgba(0, 0, 0, 0.87);
					}
		
					image {
						height: 50rpx;
						width: 50rpx;
						margin-right: 6rpx;
					}
		
					.home-font-sub {
						margin-top: 8rpx;
						margin-left: 10rpx;
					}
				}
		
				.right {
					display: flex;
					align-items: center;
		
					image {
						height: 48rpx;
						width: 48rpx;
					}
				}
			}
		
			.station-card-head-border-bottom {
				border-bottom: 1px solid rgba(224, 224, 224, 0.4);
			}
		
			// 列表
			.station-card-list {
				margin-top: 50rpx;
		
				.station-card-list-item {
					padding-bottom: 60rpx;
		
					.line-name {
						display: flex;
						justify-content: space-between;
		
						.left {
							font-weight: bold;
							color: rgba(0, 0, 0, 0.87);
						}
		
						.right {
							font-size: 32rpx;
							// color: #8f8f8f; //另一种字体颜色
							color: #26a2ff;
							font-weight: bold;
		
							image {
								margin-right: 10rpx;
								width: 12rpx;
								height: 24rpx;
							}
						}
					}
		
					.line-direction {
						color: rgba(0, 0, 0, 0.38);
						margin-top: 12rpx;
						font-size: 28rpx;
		
						text {
							margin-left: 14rpx;
						}
					}
		
				}
		
		
			}
		
			.see-all {
				text-align: center;
				padding: 20rpx;
				border-top: 1px solid rgba(224, 224, 224, 0.4);
			}
		
			// tag
			.station-card-tag-list {
				padding-bottom: 30rpx;
		
				.tag-item {
					display: inline-block;
					background-color: #e9f6ff;
					color: #26a2ff;
					border-radius: 8rpx;
					margin: 8rpx;
					padding: 4rpx 10rpx;
					border: 0.5px solid rgba(0, 0, 0, 0.1);
				}
		
				.more-img {
					height: 4rpx;
					width: 22rpx;
					margin-left: 10rpx;
				}
			}
		
		}
		
		// 收藏列表
		.collection-box {
			min-height: 460rpx;
		}
		
		.collection-list {
			.collection-list-item {
				border-radius: 16rpx;
				box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
				padding: 40rpx;
				margin: 40rpx;
				background-color: #FFFFFF;
		
				.line-name {
					display: flex;
					justify-content: space-between;
		
					.left {
						font-weight: bold;
						color: rgba(0, 0, 0, 0.87);
					}
		
					.right {
						font-size: 32rpx;
						color: #26a2ff;
						// color: #8f8f8f; //另一种字体颜色
						font-weight: bold;
		
						image {
							margin-right: 10rpx;
							width: 12rpx;
							height: 24rpx;
						}
					}
				}
		
				.line-direction {
					color: rgba(0, 0, 0, 0.38);
					margin-top: 12rpx;
					font-size: 28rpx;
		
					text {
						margin-left: 14rpx;
					}
				}
		
			}
		
		}
	}
	
	// 今日看点
	.information-box {
		position: absolute;
		bottom: 0rpx;

		.sub-title-box {
			height: 60rpx;
			line-height: 60rpx;
			padding: 0rpx $uni-spacing-row-base;
			display: flex;
			align-items: center;

			.line-left {
				width: 6rpx;
				height: 32rpx;
				background-color: #FF0000;
				margin-right: 10rpx;
			}

			.sub-title {
				font-weight: bold;
				color: #000406;
			}
		}

		.information-content-box {
			.information-img {
				width: 750rpx;
				height: 300rpx;
			}
		}
	}
	// 遮罩
	.mask{
		z-index: 99;
	}
	.triangle-border-down {
	    border: 8rpx solid transparent;
	    border-top-color: #000;
	    height: 0;
	    width: 0;
	}
</style>
